<template>
    <div id="AsnDetail">
        <div class="detail">
            <v-navMenu
                :detailNav="detailNav"
                :menuData="menuData"
                @setMentActive="setMentActive"
            ></v-navMenu>
            <component :inputData="detailData" :is="currentComponent"></component>
        </div>
    </div>
</template>

<script>
import navMenu from "commons/NavMenu";
import baseMixin from "@/mixins/BaseMixin";

export default {
    name: "AsnDetail",
    mixins: [baseMixin],
    data() {
        return {
            flag: true,
            newFlag: false,
            selectData: {},
            detailData: {
                putawayzone: "",
                abandonloc: "",
                autoprintaddrlabel: " ",
                autoprintcartoncontent: " ",
                createassignments: "0",
                inloc: "",
                labormaxcasecnt: 0,
                labormaxcube: 0,
                labormaxweight: 0,
                maxcasecnt: 0,
                maxcube: 0,
                maxpalletspersku: 0,
                maxpickingcontainers: 0,
                maxpicklines: 0,
                maxweight: 0,
                outloc: "",
                pickcc: "0",
                picktoloc: "PICKTO",
                posvermethod: "LOC",
                qtycc: 0,
                replenishment_Flag: "0",
                replenishment_Hotlevel: "6",
                replenishmentmethod: "0",
                top_Off: "A",
                uom1pickmethod: "1",
                uom2pickmethod: "1",
                uom3pickmethod: "1",
                uom4pickmethod: "1",
                uom5pickmethod: "1",
                uom6pickmethod: "1",
                zonebreak: "0",
                rtxfloor: "0"
            },
            menuData: [
                {label: this.$t('bill.detail'), index: "1"},
                {label: this.$t('outbound.pickMethod'), index: "2"},
                {label: this.$t('outbound.replenishment'), index: "3"},
                {label: this.$t('outbound.allocation'), index: "4"}
            ],
            detailNav: "1",
            componentConfig: [
                {
                    name: "ZoneDetails",
                    label: this.$t('bill.detail'),
                    component: () => import('./page/ZoneDetails.vue')
                },
                {
                    name: "PickDetails",
                    label: this.$t('outbound.pickMethod'),
                    component: () => import('./page/PickDetails.vue')
                },
                {
                    name: "Replenishment",
                    label: this.$t('outbound.replenishment'),
                    component: () => import('./page/Replenishment.vue')
                },
                {
                    name: "Allocation",
                    label: this.$t('outbound.allocation'),
                    component: () => import('./page/Allocation.vue')
                }
            ]
        }
    },
    computed: {
        currentComponent() {
            return this.componentConfig[this.detailNav - 1].component;
        }
    },
    methods: {
        setMentActive(key) {
            this.detailNav = key;
        },
        async getData() {
            try {
                let res = await this.$api.get(`/queryPutawayzoneByPutawayzoneKey/${this.selectData.putawayzone}`);
                
                    this.detailData = res.bean;
                
            } catch (e) {
                this.$message.error(e);
            }
        },
    },
    mounted() {
        this.newFlag = this.$store.state.newFlag;
        if (Object.keys(this.$store.state.skip).length !== 0) {
            let data = this.$store.state.skip;
            this.detailData = data.detail;
            this.selectData = data.routeData;
            this.detailNav = data.detailNav;
        } else if (!this.newFlag) {
            this.selectData = this.$store.state.routeData;
            this.getData();
        }
    },
    watch: {},
    components: {
        "v-navMenu": navMenu
    },
}
</script>

<style scoped>

</style>
